<template>
    <div class="source-form light-setting file-info">
        <pui-dialog :maskClick="false" :title="`设置${componentRef.typeList[componentRef.sourceType]}`" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form" style="margin-bottom: 20px;">
                    <div class="form-item">
                        <div class="label">名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波长(μm)</div>
                        <div class="form-content">
                            <!-- <pui-input placeholder="点光源波长(nm)" v-model="componentRef.compo.waveLength" type="input" clearAble></pui-input> -->
                            <input type="text" placeholder="波长" class="pui-input" v-model="componentRef.compo.waveLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">振幅</div>
                        <div class="form-content">
                            <input type="text" placeholder="振幅" class="pui-input" v-model="componentRef.compo.amplitude">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">初始相位</div>
                        <div class="form-content">
                            <input type="text" placeholder="初始相位" class="pui-input" v-model="componentRef.compo.phaseShift">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">偏振方向</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.locList" v-model="componentRef.compo.polarization"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">脉冲类型</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.pulseTypeList" v-model="componentRef.compo.pulseType"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item" v-if="componentRef.compo.pulseType === 'gaussian'">
                        <div class="label">脉宽</div>
                        <div class="form-content">
                            <input type="text" placeholder="脉宽" class="pui-input" v-model="componentRef.compo.pulse_length">
                        </div>
                    </div>
                    <div class="form-item" v-if="componentRef.compo.pulseType === 'gaussian'">
                        <div class="label">脉冲中心</div>
                        <div class="form-content">
                            <input type="text" placeholder="脉冲周期" class="pui-input" v-model="componentRef.compo.offset">
                        </div>
                    </div>
                </div>
                <div class="form" v-if="componentRef.sourceType === 'linesource'">
                    <div class="form-item">
                        <div class="label">起点位置</div>
                        <div class="form-content">
                            <!-- <pui-input placeholder="x坐标" v-model="componentRef.compo.x" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="y坐标" v-model="componentRef.compo.y" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="z坐标" v-model="componentRef.compo.z" type="input" clearAble width="60px"></pui-input> -->
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.xStart">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.yStart">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.zStart">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">终点位置</div>
                        <div class="form-content">
                            <!-- <pui-input placeholder="x坐标" v-model="componentRef.compo.x" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="y坐标" v-model="componentRef.compo.y" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="z坐标" v-model="componentRef.compo.z" type="input" clearAble width="60px"></pui-input> -->
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.xEnd">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.yEnd">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.zEnd">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">光束类型</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.waveformList" v-model="componentRef.compo.waveform"></pui-selector>
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'planesource'">
                    <div class="form-item">
                        <div class="label">中心位置</div>
                        <div class="form-content">
                            <!-- <pui-input placeholder="x坐标" v-model="componentRef.compo.x" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="y坐标" v-model="componentRef.compo.y" type="input" clearAble width="60px"></pui-input>
                            <pui-input placeholder="z坐标" v-model="componentRef.compo.z" type="input" clearAble width="60px"></pui-input> -->
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">面光源尺寸</div>
                        <div class="form-content">
                            <!-- <pui-input placeholder="x方向宽度" v-model="componentRef.compo.xLength" type="input" clearAble></pui-input> -->
                            <input type="text" placeholder="x方向" class="pui-input" v-model="componentRef.compo.xLength">
                            <input type="text" placeholder="y方向" class="pui-input" v-model="componentRef.compo.yLength">
                            <input type="text" placeholder="z方向" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">光束类型</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.waveformList" v-model="componentRef.compo.axis"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">法向</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.locList" v-model="componentRef.compo.waveform"></pui-selector>
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'pointsource'">
                    <div class="form-item">
                        <div class="label">位置</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button type="primary" @click="submit">确认</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'LightSetting'
})
</script>
<script lang="ts" setup>
import { PhotSource } from '@/common/types/phot_types';
import { reactive, getCurrentInstance } from 'vue'
import { deviceManager } from '@/services/phot_client/device';
import { deepClone, umToM, mToUm } from '@/utils'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    animate: {
        type: String,
        default: 'fade'
    },
})
const emit = defineEmits({
    onClose: (val: any) => {},
})
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const componentRef = reactive({
    dialogVisible: false,
    typeList: {
        linesource: '线光源',
        planesource: '面光源',
        pointsource: '点光源',
    },
    sourceType: '',
    compo: {},
    // {
    //     x: '',
    //     y: '',
    //     z: '',
    //     endX: '',
    //     endY: '',
    //     endZ: '',
    //     waveLength: '',
    // },
    optionsList: [
        {
            label: '是',
            value: '1',
        },
        {
            label: '否',
            value: '0',
        },
    ],
    pulseTypeList: [
        {
            label: '高斯',
            value: 'gaussian',
        },
        {
            label: '直流光',
            value: 'CW',
        },
    ],
    waveformList: [
        {
            label: '平面波',
            value: 'plane',
        },
        {
            label: '高斯光束',
            value: 'gaussian',
        },
    ],
    locList: [
        {
            label: 'x',
            value: 'x',
        },
        {
            label: 'y',
            value: 'y',
        },
        {
            label: 'z',
            value: 'z',
        },
    ],
}) as any
const submit = async () => {
    proxy.$loading.open()
    try {
        if (componentRef.sourceType === 'pointsource') {
            componentRef.compo.x = umToM(componentRef.compo.x)
            componentRef.compo.y = umToM(componentRef.compo.y)
            componentRef.compo.z = umToM(componentRef.compo.z)
        }
        if (componentRef.sourceType === 'linesource') {
            componentRef.compo.x_start = umToM(componentRef.compo.x_start)
            componentRef.compo.y_start = umToM(componentRef.compo.y_start)
            componentRef.compo.z_start = umToM(componentRef.compo.z_start)
            componentRef.compo.x_end = umToM(componentRef.compo.x_end)
            componentRef.compo.y_end = umToM(componentRef.compo.y_end)
            componentRef.compo.z_end = umToM(componentRef.compo.z_end)
        }
        if (componentRef.sourceType === 'planesource') {
            componentRef.compo.x = umToM(componentRef.compo.x)
            componentRef.compo.y = umToM(componentRef.compo.y)
            componentRef.compo.z = umToM(componentRef.compo.z)
            componentRef.compo.xLength = umToM(componentRef.compo.xLength)
            componentRef.compo.yLength = umToM(componentRef.compo.yLength)
            componentRef.compo.zLength = umToM(componentRef.compo.zLength)
        }
        const clone = deepClone(componentRef.compo)
        delete clone.parameters
        componentRef.compo.parameters = JSON.stringify(clone)
        await deviceManager.updateSource(componentRef.compo)
        proxy.$loading.close()
        proxy.$toast({
            type: 'success',
            value: '修改成功'
        })
    } catch (err: any) {
        proxy.$loading.close()
        proxy.$toast({
            type: 'error',
            value: '修改失败'
        })
    }
    closeDialog()
}
const init = async (e: any) => {
    console.group('LightSetting')
    console.log(e)
    componentRef.dialogVisible = true
    componentRef.sourceType = e.sourceType
    componentRef.compo = await deviceManager.getSource(e.compo.id)
    // componentRef.compo = new PhotSource()
    // componentRef.compo.name = e.compo.name
    // componentRef.compo.sourceId = e.compo.id
    console.log(componentRef.compo)
    console.groupEnd()
}
defineExpose({
    init
})
</script>
<style lang="scss" scoped>
    .source-form {
        :deep(.pui-input) {
            height: 28px;
            padding: 4px;
            outline: none;
        }
    }
</style>